<template>
    <div class="login">
        <div class="logo">
            <img src="../../assets/logo.png" alt="">
        </div>
        <div class="login-img">
            <img src="../../assets/login_img.png" alt="">
        </div>
        <div class="login-form">
            <div class="form_title">
                <p> {{ show }} </p>
            </div>
            <lay-form :model="model" style="width: 300px;" v-if="show == '登录'">
                <lay-form-item prop="username">
                    <lay-input v-model="model.username" prefix-icon="layui-icon-username"
                        placeholder="请输入账号"></lay-input>
                </lay-form-item>
                <lay-form-item prop="password">
                    <lay-input v-model="model.password" prefix-icon="layui-icon-password" type="password"
                        placeholder="请输入密码"></lay-input>
                </lay-form-item>
                <lay-form-item style="text-align: center;">
                    <lay-button type="primary" @click="submit" fluid :loading="LoginLoading">登录</lay-button>
                    <!-- <lay-button type="default" @click="">重置</lay-button> -->
                </lay-form-item>
                <lay-form-item style="text-align: center;">
                    <div class="div flex justify">
                        <div class="left">
                            <lay-checkbox name="like" skin="primary" v-model="model.rememberPassword" value="1"
                                label="记住密码"></lay-checkbox>
                        </div>
                        <div class="right" style="color: #1E9FFF;">
                            忘记密码？
                        </div>
                    </div>
                </lay-form-item>
                <lay-form-item style="text-align: center;">
                    <div class="div flex center">
                        还没有账号？马上去 <span style="color: #1E9FFF;" @click="show = '注册'">&nbsp;注册 </span>
                    </div>
                </lay-form-item>
            </lay-form>
            <lay-form :model="model" style="width: 300px;" v-if="show == '注册'">
                <lay-form-item prop="username" tips="账户是您的登录凭据，不少于三位">
                    <lay-input v-model="model.username" prefix-icon="layui-icon-username"
                        placeholder="请输入账户"></lay-input>
                </lay-form-item>
                <lay-form-item prop="password" tips="密码应当包含字母、数字中的任意两种">
                    <lay-input v-model="model.password" prefix-icon="layui-icon-password"
                        :type="eye ? 'password' : 'username'" placeholder="请输入密码">
                        <template #suffix>
                            <lay-icon type="layui-icon-eye-invisible" v-if="eye" @click="eye = !eye"></lay-icon>
                            <lay-icon type="layui-icon-eye" v-else @click="eye = !eye"></lay-icon>
                        </template>
                    </lay-input>
                </lay-form-item>
                <lay-form-item prop="password2" tips="再次输入密码，确保密码准确">
                    <lay-input v-model="model.password2" prefix-icon="layui-icon-password"
                        :type="eye2 ? 'password' : 'username'" placeholder="再次输入密码">
                        <template #suffix>
                            <lay-icon type="layui-icon-eye-invisible" v-if="eye2" @click="eye2 = !eye2"></lay-icon>
                            <lay-icon type="layui-icon-eye" v-else @click="eye2 = !eye2"></lay-icon>
                        </template>
                    </lay-input>
                </lay-form-item>
                <lay-form-item tips="输入你的手机号码！">
                    <lay-input v-model="model.tel" maxlength="11" prefix-icon="layui-icon-cellphone"
                        placeholder="输入你的手机号码"></lay-input>
                </lay-form-item>
                <lay-form-item style="text-align: center;">
                    <lay-button type="primary" @click="registerClick" fluid :loading="LoginLoading">注册</lay-button>
                    <!-- <lay-button type="default" @click="">重置</lay-button> -->
                </lay-form-item>
                <lay-form-item style="text-align: center;">
                    <div class="div flex justify">
                        <div class="left">
                            <lay-checkbox name="like" skin="primary" v-model="rememberPassword" value="1"
                                label="记住密码"></lay-checkbox>
                        </div>
                        <div class="right" style="color: #1E9FFF;">
                            忘记密码？
                        </div>
                    </div>
                </lay-form-item>
                <lay-form-item style="text-align: center;" class="c">
                    <div class="div flex center ">
                        已经有账号？马上去 <span style="color: #1E9FFF;" @click="show = '登录'">&nbsp;登录 </span>
                    </div>
                </lay-form-item>
            </lay-form>
            <div class="saoma" v-if="show == '扫码'">
                <img src="../../assets/erweima.png" alt="">
                <p class="center" style="padding: 10px;">
                    请使用微信扫描二维码登录
                </p>
            </div>
            <div class="triangle c" v-if="show != '扫码'" @click="show = '扫码'">
                <div class="image-container">
                    <img src="../../assets/bg-qrCode.png" class="saoma_img" alt="">
                </div>
            </div>
            <div class="triangle c" v-if="show == '扫码'" @click="show = '登录'">
                <div class="image-container">
                    <img src="../../assets/diannao.png" class="diannao" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { layer } from "@layui/layui-vue"
import {
    Login,
    Register
} from "../../api/path/login.js"
import {
    getUserRole
} from '../../api/path/role.js'
const show = ref('登录')
const router = useRouter();
const loginLoading = ref(true)
const codeLoading = ref(false)
// 小眼睛
const eye = ref(true)
const eye2 = ref(true)
const rememberPassword = ref(false)
const model = ref({
    username: '',
    password: '',
    password2: '',
    tel: ''
})


const submit = () => {
    layer.load(2, { time: 2000 })
    loginLoading.value = true
    Login({ username: model.value.username, password: model.value.password }).then((result) => {
        if (result.code == 1) {
            console.log(result);
            loginLoading.value = false
            layer.msg("登录成功！", { icon: 1, time: 1000 })
            localStorage.setItem('token', result.data.token)
            localStorage.setItem('userInfo', JSON.stringify(result.data.userinfo))

            // 获取用户权限
            getUserRole({ id: result.data.userinfo[0].role }).then((res) => {
                console.log(res);
                if (res.code == 1) {
                    localStorage.setItem('userRole', JSON.stringify(res.data))
                    setTimeout(() => {
                        login()
                    }, 1000)
                } else {
                    layer.msg(res.msg)
                }
            }).catch((err) => {
                layer.msg(err)
            });

        } else {
            layer.msg(result.msg)
            loginLoading.value = false
        }
    }).catch((err) => {
        loginLoading.value = false
    });
}

const register = () => {
    layer.load(2, { time: 2000 })
    loginLoading.value = true
    let param = {
        username: model.value.username,
        password: model.value.password,
        totalConsumption: 100,
        userImage: 'https://xckf-bucket.oss-cn-guangzhou.aliyuncs.com/102/yx/luban.webp',
        role: 1,
        phone: model.value.tel,
        balance: 0,
    }
    if (model.value.password == model.value.password2) {
        Register(param).then((result) => {
            console.log(result);
            if (result.code == 1) {
                loginLoading.value = false
                layer.msg("注册成功！", { icon: 1, time: 1000 })
                setTimeout(() => {
                    show.value = "登录"
                }, 1000)
            } else {
                layer.msg(result.msg)
                loginLoading.value = false
            }
        }).catch((result) => {
            loginLoading.value = false
        })
    } else {
        layer.msg('两次密码不一样！')
        loginLoading.value = false
    }
}

const registerClick = () => {
    if (model.value.password != '' && model.value.password2 != '') {
        if (model.value.password == model.value.password2) {
            register()
        } else {
            layer.msg('两次密码不一致')
        }
    } else {
        layer.msg('密码不能为空')
    }

}

const login = () => {
    router.push('/home')
}

</script>
<style scoped lang="less">
.login {
    position: relative;
    width: 100%;
    height: 100vh;

    .logo {
        position: absolute;
        top: 5%;
        left: 5%;

        img {
            height: 60px;
        }
    }

    .login-form {
        .form_title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 30px;

            p {
                border-bottom: 4px solid #009688;
                padding-bottom: 10px;
                display: inline;
            }
        }

        border-radius: 20px;
        padding:50px 40px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        background-color: #fff;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        right: 10%;
    }
}

.login-img {
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translate(0, -50%);

    img {
        width: 400px;
    }
}

.saoma {
    padding: 30px;

    img {
        width: 250px;
    }
}

// .saoma {
//     width: 50px;
//     height: 50px;
//     position: relative;
// }

// .saoma::after {
//     content: "";
//     position: absolute;
//     top: 0;
//     right: 0;
//     border-bottom: 50px solid transparent;
//     border-left: 50px solid transparent;
//     border-right: 50px solid transparent;
//     overflow: hidden;
// }


.triangle {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 0;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}

.image-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #eee;

    .saoma_img {
        width: 60px;
        height: 60px;
        display: block;
        max-width: none;
        max-height: none;
        position: absolute;
        bottom: -1px;
        left: -1px;
    }

    .diannao {
        width: 30px;
        height: 30px;
        display: block;
        max-width: none;
        max-height: none;
        position: absolute;
        right: 6px;
        top: 6px;
    }
}
</style>